import React, { PureComponent } from 'react';
import { Card, Modal, Button, message } from 'antd';
import PdfView from './pdfView';
import WordView from './wordView';
import ExcelView from './excelView';
import PptView from './pptView';

class FileView extends PureComponent<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      fileInfo: {}
    };
  }

  componentDidMount () {
    this.props.onRef(this);
  }
  
  setData = (file: any) => {
    this.setState({
      fileInfo: file,
    }, () => {
      this?.fileRef?.initView(file);
    })
  }

  clearData = () => {
    this?.fileRef?.clearData && this?.fileRef?.clearData()
  }

  render() {
    const { fileInfo } = this.state;
    const contentList = {
      pdf: <PdfView onRef={(ref: any) => this.fileRef = ref} />,
      docx: <WordView onRef={(ref: any) => this.fileRef = ref} />,
      xlsx: <PdfView onRef={(ref: any) => this.fileRef = ref} />,
      pptx: <PdfView onRef={(ref: any) => this.fileRef = ref} />,
      doc: <PdfView onRef={(ref: any) => this.fileRef = ref} />,
      xls: <PdfView onRef={(ref: any) => this.fileRef = ref} />,
      ppt: <PdfView onRef={(ref: any) => this.fileRef = ref} />,
      // pptx: null,
    }
    return (
      <div style={{ width: '100%', height: '100%', }}>
        { contentList[fileInfo.fileExt] }
      </div>
    )
  }
}
export default FileView;
